﻿@{
	ViewBag.Title = "我的消息";
}
<link href="@Url.Content("~/Content/themes/base/jquery-mytabs.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/validationEngine.jquery.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/datatable_ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.dataTables.crud.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validationEngine.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validationEngine-ch.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mytabs.js")" type="text/javascript"></script>
<script type="text/javascript">
	var $dialog;
	var $tabs;
	var mfromto, msubject, mcontent, mdate, fromOrTo,msgid;
	function getMessageBody() {
		var replayBtn = "";
		if (fromOrTo == "来自")
		    replayBtn = "<input type='hidden' id='_replyto' value='" + mfromto + "'/>";
		return replayBtn + "<div class='messagebody'>" +
                    "<p><strong>" + fromOrTo + ":</strong>&nbsp&nbsp<a href='#' class='username'>" + mfromto + "</a></p>" +
					"<p><strong>日期:</strong>&nbsp&nbsp" + mdate + "</p>" +
                    "<p ><strong>主题:</strong>&nbsp&nbsp" + msubject + "</p>" +
					"<p><strong>内容:</strong></p><p>" + mcontent + "</p>";
	};

	//双击 未读消息table 时会执行这个函数
	function fnUnReadMessageDetails(id) {
		GetReceviedMessage(id, "/User/ReadMessageUnRead");
		moveUnReadToRead(id);
	}
	function moveUnReadToRead(id) {
		var data = deleteUnRead(id);
		//addRead(data);
	}
	function deleteUnRead(id) {
		var tableUnRead = $("#table-1").dataTable() ;
		var trs = tableUnRead.fnGetNodes();
		var del;
		var data;
		for (var i = 0; i < trs.length; i++) {
			if ($(trs[i]).attr("id") == id) {
				//data = getRowData(trs[i]);
				tableUnRead.fnDeleteRow(trs[i]);
				break
			}
		}
		return data;
	}
	function addRead(data) {
		var tableRead = $("#table-2").dataTable();  
		tableRead.fnAddData(rowData);
	}
	function getRowData(tr) {
		var data = new Array();
		var tds = $(tr).children();
		var length = tds.length;
		for (var i = 0; i < length; i++) {
			data.push(tds[i].text());
		}
		return data;
	}
	function fnReadMessageDetails(id) {
		GetReceviedMessage(id, "/User/ReadMessageRead");

	}
	function fnSentMessageDetails(id) {
	    if (id != "") {
	        $("#messageDetails").dialog("open");
			$.get(
					"/User/ReadMessageSent",
					{ "Id": id },
					function (data) {
						if (data.Subject != null) {
							msgid = id;
							mfromto = data.To;
							msubject = data.Subject;
							mcontent = data.Content;
							mdate = data.Date;
							fromOrTo = "送至";
							showDetails(id, data.Subject);
						}
					}
				);
		}
	}
	function GetReceviedMessage(id, url) {
	    if (id != "") {
	        $("#messageDetails").dialog("open");
			$.get(
					url,
					{ "Id": id },
					function (data) {
						if (data.Subject != null) {
							mfromto = data.From;
							msubject = data.Subject;
							mcontent = data.Content;
							mdate = data.Date;
							fromOrTo = "来自";
							showDetails(id, data.Subject);
						}
					}
				);
		}
	}
	var tab_counter = 5;
	function showDetails(id, title) {
	    $("#messageDetails").empty();
	    $("#messageDetails").append(getMessageBody());
	}
	function sendMessage() {
		var to = $("#sendTo").get(0).value;
		var subject = $('#sendSubject').get(0).value;
		var content = $("#sendContent").get(0).value;
		if (to != "" && subject != "") {
			$.post(
				"/User/SendMessage",
				{ "Subject": subject, "To": to, "Content": content },
				function (data) {
					$('#sendMessageResult').text(data.Message);
				}
			);
		} else {
			$('#sendMessageResult').text("收件人和主题不能为空");
		}
	};
	//以下是初始化table的一些变量
	var unreadBeenInit = false;
	var readBeenInit = false;
	var sentBeenInit = false;
	var sAjaxSource = "/User/MessagesUnRead";
	var sDeleteURL = "/User/DeleteMessageUnRead";
	var sDeleteRowButtonId = "deleteMessageUnReadButton";
	var fnShowDetails;
	var cPageId;
	var tableToolBarId;
	var datatablelang = {
		"sLengthMenu": "每页显示 _MENU_ 条记录",
		"sZeroRecords": "没有找到任何记录",
		"sInfo": "_START_ 到 _END_ - 共 _TOTAL_ 条记录",
		"sInfoEmpty": " 0 到 0 - 共 0 records",
		"sInfoFiltered": "(从 _MAX_ 条记录中过滤后的结果)",

		"sProcessing": "处理中...",
		"sEmptyTable": "表中没有可用数据",
		"sSearch": "搜索:",
		"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "上一页",
			"sNext": "下一页",
			"sLast": "末页"
		}
	};

	function initializeTable(tableid) {
		var oTable = $(tableid).dataTable({
			"bAutoWidth": false,
			"bLengthChange": true,
			"bSort": false,
			"bInfo": true,
			"bDestroy": true,
			"sPaginationType": "full_numbers",
			"bJQueryUI": true,
			"iDisplayLength": 10,
			"bServerSide": true,
			"bProcessing": true,
			"sAjaxSource": sAjaxSource,
			"oLanguage": datatablelang,
			"aoColumns": [
			{ "bVisible": false },
			null,
			{ "bSearchable": true },
			null
		]
		}).makeEditable({
			sDeleteRowButtonId: sDeleteRowButtonId,
			sDeleteURL: sDeleteURL,
			sToolbarId: tableToolBarId,
			onRowDoubleClick: fnShowDetails

		});
	}

	$(function () {
	    $("#messageDetails").dialog({
	        autoOpen: false,
	        modal: true,
	        buttons: [
                { text: "回复", click: function () {
                    var replyto = $("input#_replyto").get(0).value;
                    $("#messageform").get(0).reset();
                    $("#sendTo").get(0).value = replyto;
                    $(this).dialog("close");
                    $("#tabs").mytabs("select", "#tabs-0");
                }
                },
                { text: "关闭", click: function () { $(this).dialog("close"); } }
            ]
	    });
	    /*发送消息面板中的确认按钮事件*/
	    $("#sendMessageBtn").button().click(function () {
	        if ($("#messageform").validationEngine("validate") == true) {
	            sendMessage();
	        }
	    });
	    /*发送消息面板中的clear窗口按钮事件*/
	    $("#clearMessageFormBtn").button().click(function () {
	        $("#messageform").get(0).reset();
	        $("#sendMessageResult").html("");
	    });
	    $tabs = $("#tabs").mytabs({
	        show: function (panelid) {
	            $('#messageform').validationEngine('hide');
	            if (panelid == "#tabs-1") {
	                if (unreadBeenInit == false) {
	                    sAjaxSource = "/User/MessagesUnRead";
	                    sDeleteURL = "/User/DeleteMessageUnRead";
	                    sDeleteRowButtonId = "deleteMessageUnReadButton";
	                    fnShowDetails = fnUnReadMessageDetails;
	                    tableToolBarId = "holder-1";
	                    initializeTable("#table-1");
	                    unreadBeenInit = true;
	                }
	            }
	            else if (panelid == "#tabs-2") {
	                if (readBeenInit == false) {
	                    sAjaxSource = "/User/MessagesRead";
	                    sDeleteURL = "/User/DeleteMessageRead";
	                    sDeleteRowButtonId = "deleteMessageReadButton";
	                    fnShowDetails = fnReadMessageDetails;
	                    tableToolBarId = "holder-2";
	                    initializeTable("#table-2");
	                    readBeenInit = true;
	                }
	            }
	            else if (panelid == "#tabs-3") {
	                if (sentBeenInit == false) {
	                    sAjaxSource = "/User/MessagesSent";
	                    sDeleteURL = "/User/DeleteMessageSent";
	                    sDeleteRowButtonId = "deleteMessageSentButton";
	                    fnShowDetails = fnSentMessageDetails;
	                    tableToolBarId = "holder-3";
	                    initializeTable("#table-3");
	                    sentBeenInit = true
	                }
	            }
	        }

	    });

	    $("#messageform").validationEngine();
	});
</script>
<div id="messageDetails">加载中...</div>
<div id="tabs">
	<ul>
		<li><a href="#tabs-0">新建消息</a></li>
		<li><a href="#tabs-1">未读消息</a></li>
		<li><a href="#tabs-2">已读消息</a></li>
		<li><a href="#tabs-3">发件箱</a></li>    
	</ul>
	<div id="tabs-0">   			
		<form id="messageform" method="post" action="">

				<div class="editor-label">
					<label>发送至</label>
				</div>
				<div class="editor-field">
					<input class="validate[required] " id="sendTo" name="sendTo" type="text" value="" />					
				</div>
				<div class="editor-label">
					<label>主题</label>
				</div>
				<div class="editor-field">
					<input  class="validate[required]" id="sendSubject" name="sendSubject" type="text" value="" />
				</div>
				<div class="editor-label">
					<label>内容</label>
				</div>
				<div class="editor-field">
					<textarea rows="5" cols="100" " id="sendContent",name="sendContent" ></textarea> 
				</div>         
				<br />
				<button id="sendMessageBtn">发送</button>
				<button id="clearMessageFormBtn">清空</button>
				<div id="sendMessageResult"></div>

		</form>		
	</div>
	<div id="tabs-1">
		<div class="table-toolbar-holder" id="holder-1"></div>
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="table-1">
			<thead>
				<tr>
					<th width="0px">ID</th>
					<th width="10%">来自</th>
					<th width="30%">主题</th>
					<th width="10%">日期</th>
				</tr>
			</thead>
			<tbody>
		
			</tbody>
			<tfoot>
				<tr>
					<th>ID</th>
					<th>来自</th>
					<th>主题</th>
					<th>日期</th>
				</tr>
			</tfoot>
		</table>
	</div>
	<div id="tabs-2">
		<div class="table-toolbar-holder" id="holder-2"></div>
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="table-2">
			<thead>
				<tr>
					<th width="0px">ID</th>
					<th width="10%">来自</th>
					<th width="30%">主题</th>
					<th width="10%">日期</th>
				</tr>
			</thead>
			<tbody>
		
			</tbody>
			<tfoot>
				<tr>
					<th>ID</th>
					<th>来自</th>
					<th>主题</th>
					<th>日期</th>
				</tr>
			</tfoot>
		</table>						
	</div>
	<div id="tabs-3">
		<div class="table-toolbar-holder" id="holder-3"></div>
		<table cellpadding="0" cellspacing="0" border="0" class="display" id="table-3">
			<thead>
				<tr>
					<th width="0px">ID</th>
					<th width="10%">送至</th>
					<th width="30%">主题</th>
					<th width="10%">日期</th>
				</tr>
			</thead>
			<tbody>
		
			</tbody>
			<tfoot>
				<tr>
					<th>ID</th>
					<th>送至</th>
					<th>主题</th>
					<th>日期</th>
				</tr>
			</tfoot>
		</table>							
	</div>
</div>
